<template>
  <div class="dimission">
    <div v-if="$route.path=='/helpcenter/articleManage'">
      <div class="bgg">
        <div class="card_title">
          文章管理
        </div>
        <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">
          <div>
            <span>分类：</span>
            <a-select
              label-in-value
              style="width: 207px;margin-right: 5px;"
              placeholder="选择分类"
              @change="userChange"
              class="br4"
              v-model="userid"
              allowClear
            >
              <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
                {{ v.name }}
              </a-select-option>
            </a-select>
          </div>
          <div>
            <a-space>
              <a-input-search v-model="search" placeholder="分类 / 标题" style="width: 200px" @search="onSearch"/>
              <a-button class="br4" @click="classshow = true">编辑分类</a-button>
              <a-button type="primary" class="br4" @click="gorelease">
                <a-icon type="plus"/>
                发布文章
              </a-button>
            </a-space>
          </div>
        </div>
        <a-table
          :columns="columns"
          :rowKey="activity => activity.id"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="pic" slot-scope="text,row">
            <img :src="row.pic" alt="" style="width:83px;height:40px;border-radius: 6px;">
          </div>
          <div slot="active" slot-scope="row">
            <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="dodelarticlecontent(row.id)">
              <template slot="title">
                确认要删除吗?
              </template>
              <a-button type="link" style="color:red">删除</a-button>
            </a-popconfirm>
            <a-button type="link" @click="doeditclass(row)">修改</a-button>
            <a-button type="link" style="color: #101010" @click="openinform(row)">同步通知</a-button>
          </div>
        </a-table>

      </div>
      <a-modal
        v-model="classshow"
        :footer="null"
        :width="301"
        :closable="false"
        :maskClosable="true"
        :centered="true"
        class="modal1"
        :bodyStyle="{
          padding:'13px'
        }"
      >
        <div class="addclass">
          <div class="flex row_bet col_center">
            <a-input placeholder="输入分类名称" v-model="class_name" style="width:200px;height:30px;border-radius: 4px;"/>
            <a-button
              type="primary"
              :disabled="btnloading"
              @click="getclassinfo"
              style="width:58px;height:30px;padding:0;border-radius: 4px;">
              <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
              {{ btnloading===true?'添加中...':'添加' }}
            </a-button>
          </div>
          <a-divider style="margin:12px 0;"/>
          <div>
            <a-table
              :columns="
                columns2"
              :data-source="classList"
              :showHeader="false"
              :pagination="false">
              <template
                v-for="col in ['name']"
                :slot="col"
                slot-scope="text, record"
              >
                <div :key="col">
                  <a-input
                    v-if="record.editable"
                    style="margin: -5px 0"
                    :value="text"
                    @change="e => handleChange(e.target.value, record.key, col)"
                  />
                  <template v-else>
                    {{ text }}
                  </template>
                </div>
              </template>
              <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                  <span v-if="record.editable" class="flex row_bet col_center flex_wrap">
                    <a @click="() => save(record.key,record)">保存</a>
                    <a @click="cancel(record.key)">取消</a>
                  </span>
                  <span v-else class="flex row_bet col_center flex_wrap">
                    <a-popconfirm title="确认删除吗?" @confirm="() => dodel(record.key,record.id)">
                      <a :disabled="editingKey !== ''" style="color:red;">删除</a>
                    </a-popconfirm>
                    <a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
                  </span>
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </a-modal>
      <a-modal
        v-model="inform"
        :width="556"
        title="同步通知"
        :closable="true"
        :maskClosable="true"
        :centered="true"
        class="modal2"
        :bodyStyle="{
          padding:'13px'
        }"
        @ok="dorelease"
      >
        <div class="inform">
          <div style="margin-bottom: 11px">
            <span>选择文章：</span>
            <a-select
              label-in-value
              style="width: 434px;margin-right: 5px;"
              placeholder="选择文章"
              @change="articleChange"
              class="br4"
              v-model="articleid"
              allowClear
            >
              <a-select-option :value="v.id" v-for="v in articletitleList" :key="v.id">
                {{ v.title }}
              </a-select-option>
            </a-select>
          </div>
          <div style="margin-bottom: 13px;">
            <img :src="articleimg" alt="" style="width:510px;height:260px;border-radius: 10px;">
          </div>
          <div style="margin-bottom: 15px;">
            <span>标题：</span>
            <a-input placeholder="输入通知标题" style="width:469px" v-model="title"/>
          </div>
          <div>
            <span>对象：</span>
            <a-radio-group v-model="type" @change="informobjChange">
              <a-radio :value="1">
                所有站点
              </a-radio>
              <a-radio :value="2">
                本站点
              </a-radio>
              <a-radio :value="3">
                <a-input
                  placeholder="指定用户"
                  style="width:266px;height:27px;"
                  v-model="informobjid"
                  @focus="type = 3"/>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
      </a-modal>
    </div>
    <router-view v-else></router-view>
  </div>
</template>

<script>
  import {
    doaddnoticemsg,
    dodelarticlecontent,
    doupdateclassinfo,
    getarticleclass,
    getclasscontent,
    getclassinfo,
    getselectarticlecontent
  } from '@/api/articleApi'
  import moment from 'moment'

  export default {
    name: 'Dimission',
    data () {
      return {
        moment,
        btnloading: false,
        informobjid: '',
        class_name: '',
        editingKey: '',
        classshow: false,
        inform: false,
        userid: [],
        user_id: '',
        title: '',
        articleid: [],
        article_id: '',
        articleimg: '',
        columns: [
          {
            title: '分类',
            align: 'left',
            dataIndex: 'class_name',
            scopedSlots: {
              customRender: 'class_name'
            }
          },
          {
            title: '文章ID',
            // width: 150,
            align: 'center',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },

          {
            title: '预览图',
            align: 'center',
            dataIndex: 'pic',
            scopedSlots: {
              customRender: 'pic'
            }
          },
          {
            title: '标题',
            align: 'center',
            dataIndex: 'title',
            scopedSlots: {
              customRender: 'title'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [],
        articletitleList: [],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        search: '',
        classList: [
          // {
          //   id: 1,
          //   key: '1',
          //   name: 'ceshi'
          // },
        ],
        columns2: [
          {
            title: 'id',
            dataIndex: 'id',
            scopedSlots: { customRender: 'id' }
          },
          {
            title: 'name',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: 'operation',
            align: 'center',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      }
    },
    watch: {
      $route (to, from) {
        console.log(from.path)
        if (from.path === '/helpcenter/articleManage/pubArticle') {
          this.getarticleclass()
          this.getselectarticlecontent(1, 15)
        }
      }
    },
    computed: {},
    created () {
      if (this.rows) {

      }
      this.getarticleclass()
    },
    mounted () {
    },
    methods: {
      doeditclass (row) {
        console.log(row)
        this.$store.dispatch('setRowsname', row)
        this.gorelease()
      },
      dodelarticlecontent (id) {
        dodelarticlecontent({
          id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getselectarticlecontent(1, 15)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      gorelease () {
        this.$router.push({
          path: '/helpcenter/articleManage/pubArticle'
        })
      },
      dorelease () {
        doaddnoticemsg({
          type: this.type,
          title: this.title,
          pic: this.articleimg,
          redirect_url: this.article_id,
          user_id: this.informobjid
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.articleimg = ''
            this.article_id = ''
            this.title = ''
            this.articleid = []
            this.inform = false
            this.$message.success('发布成功!')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      openinform (item) {
        console.log(item)
        this.articleimg = item.pic
        this.article_id = item.id
        this.articleid = [
          {
            key: item.id,
            label: item.title
          }
        ]
        this.getclasscontent()
        this.inform = true
      },
      informobjChange (e) {
        console.log('radio checked', e.target.value)
      },
      handleChange (value, key, column) {
        const newData = [...this.classList]
        const target = newData.filter(item => key === item.key)[0]
        if (target) {
          target[column] = value
          this.classList = newData
        }
      },
      edit (key) {
        const newData = [...this.classList]
        const target = newData.filter(item => key === item.key)[0]
        this.editingKey = key
        if (target) {
          target.editable = true
          this.classList = newData
        }
      },
      save (key, record) {
        const newData = [...this.classList]
        const newCacheData = [...this.cacheData]
        const target = newData.filter(item => key === item.key)[0]
        const targetCache = newCacheData.filter(item => key === item.key)[0]
        if (target && targetCache) {
          delete target.editable
          this.classList = newData
          Object.assign(targetCache, target)
          this.cacheData = newCacheData
        }
        this.editingKey = ''
        doupdateclassinfo({
          id: record.id,
          name: record.name
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('修改成功!')
            // this.getarticleclass()
            // this.class_name = ''
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      dodel (key, id) {
        for (let i = 0; i < this.classList.length; i++) {
          if (this.classList[i].id === id) {
            this.classList.splice(i, 1)
            this.cacheData.splice(i, 1)
          }
        }
      },
      cancel (key) {
        const newData = [...this.classList]
        const target = newData.filter(item => key === item.key)[0]
        this.editingKey = ''
        if (target) {
          Object.assign(target, this.cacheData.filter(item => key === item.key)[0])
          delete target.editable
          this.classList = newData
        }
      },
      getarticleclass () {
        getarticleclass().then(res => {
          console.log(res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].key = i.toString()
          }
          this.classList = res.data
          this.cacheData = this.classList.map(item => ({ ...item }))
          this.userid = [
            {
              key: res.data[0].id,
              label: res.data[0].name
            }
          ]
          this.user_id = res.data[0].id
          this.getselectarticlecontent(1, 15)
        }).catch(err => {
          console.log(err)
        })
      },
      getclasscontent () {
        getclasscontent({
          class_id: this.user_id
        }).then(res => {
          console.log(res)
          this.articletitleList = res.data
        }).catch(err => {
          console.log(err)
        })
      },

      onSearch (value) {
        console.log(value)
      },
      userChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.user_id = null
        } else {
          this.user_id = value.key
        }
        this.getselectarticlecontent(1, 15)
      },
      articleChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.article_id = null
        } else {
          this.article_id = value.key
        }
        const obj = this.getobjnature(this.articletitleList, 'id', value.key)
        console.log(obj)
        this.articleimg = obj.pic
        // this.getgroupfinance(1, 15, this.search)
      },
      getobjnature (list, key, nature) {
        for (const i in list) {
          if (list[i][key] === nature) {
            return list[i]
          }
        }
        return null
      },
      getclassinfo () {
        this.btnloading = true
        if (this.class_name === '') {
          this.btnloading = false
          this.$message.info('请先填写分类名称!')
          return
        }
        getclassinfo({
          class_name: this.class_name
        }).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.$message.success('添加成功!')
            this.getarticleclass()
            this.btnloading = false
            this.class_name = ''
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getselectarticlecontent (page, pagesize) {
        this.loading = true
        getselectarticlecontent({
          page: page,
          pagesize: pagesize,
          class_id: this.user_id
        }).then(res => {
          console.log(res)
          this.activity = res.data.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.count
          this.pagination = pagination
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      },
      dosubmit () {
      },
      onClose () {
        this.drawershow = false
        this.username = ''
      },

      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getcrewlist(params.page, 15)
      }

    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }

  .modal1 {
    .ant-modal-content {
      border-radius: 6px !important;
    }

    .ant-table-tbody > tr > td:first-child {
      border-left: none !important;
    }

    .ant-table-tbody > tr > td:last-child {
      border-right: none !important;
    }
  }

  .modal2 {
    .ant-modal-content {
      border-radius: 4px !important;
    }

    .ant-select-selection {
      border-radius: 4px;
    }

    .ant-input {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .dimission {
    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }
  }
</style>
